<script lang="ts" setup>
import { QDialog, QToolbar, QToolbarTitle, QBtn } from "quasar";

const vueProps = defineProps<{
  modelValue: boolean;
  hideBottom?: boolean;
}>();

const emit = defineEmits<{
  (event: "close"): void;
  (event: "update:modelValue", bool: boolean): void;
}>();
</script>

<template>
  <q-dialog :model-value="vueProps.modelValue" persistent position="bottom" transition-show="jump-up"
    transition-hide="jump-down" backdrop-filter="blur(8px)" @update:model-value="(d) => emit('update:modelValue', d)">
    <div class="w-full">
      <div
        class="container relative mx-auto bg-white rounded-t-lg overflow-hidden flex flex-col flex-nowrap min-h-50vh max-h-80vh">
        <q-toolbar class="bg-primary text-white">
          <q-toolbar-title>
            <slot name="title"></slot>
          </q-toolbar-title>
          <q-btn dense flat icon="close" @click="emit('close')"></q-btn>
        </q-toolbar>

        <div class="w-full h-0 flex-1 overflow-y-auto">
          <slot></slot>
        </div>

        <div v-if="!vueProps.hideBottom" class="p-3 flex items-end gap-3 border-t">
          <slot name="bottom"></slot>
        </div>
      </div>
    </div>
  </q-dialog>
</template>
